<template>
    <div class>
        <div class="input-item">
            <div class="lbl-box">
                <label for="txtSmsCodef">请输入验证码</label>
            </div>
            <div class="txt-box">
                <div class="val-box all">
                    <input
                        class="txt-input"
                        id="txtSmsCodef"
                        name="sms_codef"
                        type="text"
                        placeholder="请输入验证码"
                        ref="sms_code"
                        value
                        v-model="sms_codef"
                        @change="change_code"
                    >
                    <i class="icon iconfont icon-guanbi111 custom-Eicon" @click="keywordEmpty()"></i>
                </div>
            </div>
        </div>
        <div class="input-item">
            <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
        </div>
        <div class="input-item">
            <el-button
                type="button"
                @click="sendcode"
                :disabled="disabled"
                v-if="disabled==true"
            >{{btntxt}}</el-button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import constant from "@/utils/constant.js";
    // 引用API文件
    import http from "@/utils/http.js";
    export default {
        name: "smsCode",
        data() {
            return {
                disabled: false,
                time: 0,
                btntxt: "重新发送",
                sms_codef: ""
            };
        },
        methods: {
            keywordEmpty() {
                this.$refs.sms_codef.value = "";
                this.$store.commit("updateSmsCodef", "");
            },
            change_code() {
                this.$store.commit("updateSmsCodef", this.sms_codef);
            },
            //手机验证发送验证码
            sendcode() {
                const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                let mobile = this.$store.state.loginform.mobile;
                if (mobile == "") {
                    this.$message({
                        message: "手机号不能为空",
                        type: "warning"
                    });
                    return;
                }
                if (!reg.test(mobile)) {
                    this.$message({
                        message: "请输入正确的手机号",
                        type: "warning"
                    });
                    return;
                } else {
                    console.log(mobile);

                    http.post(this, {
                        url: "ucenter/forgetpassword_sms",
                        data: {
                            mobile: mobile,
                            token:localStorage.getItem("user_token")
                        },
                        dataType: "json",
                        success: function(data) {
                            console.log("发送短信:", data);
                            if (data.status == 1) {
                                this.$message({
                                    message: "发送成功",
                                    type: "success",
                                    center: true
                                });
                            } else {
                                this.$message.error(data.info);
                            }
                        }
                    });

                    this.time = 60;
                    this.disabled = true;
                    this.timer();
                }
            },
            //60S倒计时
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt = this.time + "s后重新获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.btntxt = "获取验证码";
                    this.disabled = false;
                }
            }
        },
        components: {},
        created() {}
    };
</script>

<style scoped lang="css">
</style>
